<template>
  <div class="hello">
    <h1 :title="message">{{ msg }}</h1>
    <h2 v-if="seen">韩帅帅</h2>
    <ul>
      <li v-for="info in todos">
        <p :data-id="info.id">{{info.text}}</p>
      </li>
    </ul>

    <ul>
      <f-commonent v-for="info in todos" :todo="info" :key="info.id"></f-commonent>
    </ul>

    <div>
      <input type="text" v-model="inputText" placeholder="请输入" v-on:keyup.enter="addItem">
      <ul>
        <li is="todo-item" v-for="(info,index) in items" :title="info" :key="info.id"
            v-on:remove="items.splice(index, 1)"></li>
      </ul>
    </div>

    <div id="demo1">
      <input type="checkbox" value="韩" v-model="checkArry">
      <label for="">韩</label>
      <input type="checkbox" value="赵" v-model="checkArry">
      <label for="">赵</label>
      <input type="checkbox" value="李" v-model="checkArry">
      <label for="">李</label>
      <p>已选择：{{checkArry}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: '你好123',
        message: '页面加载于 ' + new Date().toLocaleString() + '李梓博',
        seen: true,
        todos: [
          {text: '段落一', id: '0'},
          {text: '段落二', id: '1'},
          {text: '段落三', id: '2'},
          {text: '段落四', id: '3'}
        ],
        inputText: '',
        items: [
          {text: 'item1', id: '0'},
          {text: 'item2', id: '1'},
          {text: 'item3', id: '2'},
          {text: 'item4', id: '3'}
        ],
        checkArry:[]
      }
    },
    created: function () {
      console.log(this.todos)
    },
    methods: {
      addItem: function () {
        if (this.inputText != '') {
          this.items.push({
            id: this.items.length,
            text: this.inputText
          })
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }

  ul {
    list-style-type: none;
    padding: 0;
  }

  li {
    display: inline-block;
    margin: 0 10px;
  }

  a {
    color: #42b983;
  }
</style>
